<style lang="scss" scoped>
.app-container {
    >p {
        opacity: 1;
        margin: 0 0 0 20px;
        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        color: rgba(17, 38, 60, 1);
        border-left: 3px solid rgba(84, 91, 245, 1);
        padding-left: 10px;
        margin-bottom: 15px;
        margin-left: 0;
    }

    .header {
        .el-form {
            left: 224px;
            top: 104px;
            min-height: 0px;
            opacity: 1;
            border-radius: 10px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
            margin-bottom: 15px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 10px 20px;

            .el-form-item {
                margin-bottom: 10px;

                ::v-deep .el-form-item__label {
                    opacity: 1;
                    /** 文本1 */
                    font-size: 14px;
                    font-weight: 400;
                    letter-spacing: -0.07px;
                    line-height: 32px;
                    color: rgba(3, 2, 2, 1);
                    text-align: right;
                    vertical-align: middle;

                }

                ::v-deep .el-form-item__content {

                    .el-input {
                        width: 165px;

                        .el-input__inner {
                            width: 165px;
                            border: 1px solid rgba(127, 127, 213, 0.5);
                            border-radius: 10px;
                        }
                    }

                    .el-button {
                        height: 32px;
                        opacity: 1;
                        border-radius: 2px;
                        background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
                        padding: 8px 18px;
                        color: #fff;
                        border: none;
                        margin-left: 25px;

                        &:hover {
                            border: none;
                            background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

                        }

                        &:nth-child(1) {
                            width: 60px;
                            height: 32px;
                            opacity: 1;
                            border-radius: 2px;
                            background: rgba(242, 243, 245, 1);
                            color: rgba(0, 0, 0, 0.3);
                            padding: 8px 16px 8px 16px;

                            &:hover {
                                border: none;
                                background: rgb(228, 228, 228);

                            }
                        }


                    }
                }


            }
        }
    }


    .content {
        opacity: 1;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        padding-top: 0px;
        padding-bottom: 20px;

        .el-tabs {
            margin-left: 50px;

            ::v-deep .el-tabs__item {
                color: rgba(188, 195, 212, 1);
                font-size: 14px;
            }

            ::v-deep .is-active {
                color: rgba(94, 129, 244, 1) !important;
                opacity: 1;
                /** 文本1 */
                font-size: 15px;
                font-weight: 700;
                letter-spacing: 0px;
                color: rgba(94, 129, 244, 1);
            }

            ::v-deep .el-tabs__active-bar {
                background-color: rgba(94, 129, 244, 1) !important;
            }
        }

        .description-cell {
            .cell-content {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.6em;
                max-height: 3.2em;
            }
        }


        ::v-deep .el-table {
            font-size: 12px;

            .el-tooltip__popper.is-dark {
                white-space: normal;
                max-width: 200px;
                /* 或者其他合适的宽度 */
            }
        }

        ::v-deep .el-table .el-table__header-wrapper th,
        ::v-deep .el-table .el-table__fixed-header-wrapper th {
            height: 41px !important;
            opacity: 1;
            border-radius: 10px 10px, 0px, 0px;
            background: rgba(83, 90, 244, 0.1);

            /** 文本1 */
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 11.72px;
            color: rgba(83, 90, 244, 1);
            vertical-align: top;

        }

        .status {
            display: block;
            padding: 3px 0px;
            opacity: 0.9;
            border-radius: 5px;
            font-size: 11px;
            text-align: center;
            transition: opacity 0.3s ease-in-out;
        }

        .status:hover {
            opacity: 1;
        }

        .normal {
            color: #00B3A7;
            /* 深青色 */
            background-color: #E0F7FA;
            /* 浅青色 */
        }

        .tradingIn {
            color: #FFA500;
            /* 橙色 */
            background-color: #ffeac9;
            /* 浅橙色 */
        }

        .soldOut {
            color: #FF0000;
            /* 红色 */
            background-color: #ffdada;
            /* 浅红色 */
        }

        .abnormal {
            color: #FF00FF;
            /* 紫色 */
            background-color: #FFE4FF;
            /* 浅紫色 */
        }


    }

}

::v-deep .el-dialog {
    width: 849px;
    opacity: 1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    p {
        opacity: 1;
        margin: 0 0 0 20px;
        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        color: rgba(17, 38, 60, 1);
        border-left: 3px solid rgba(84, 91, 245, 1);
        padding-left: 10px;
        margin-bottom: 15px;
        margin-left: 0;
    }

    .el-input {
        width: 165px;

        .el-input__inner {
            width: 165px;
            border: 1px solid rgba(127, 127, 213, 0.5);
            border-radius: 10px;
        }
    }

    .el-button {
        width: 60px;
        height: 32px;
        opacity: 1;
        border-radius: 2px;
        background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
        padding: 8px 16px 8px 16px;
        color: #fff;
        border: none;
        margin-left: 25px;

        &:hover {
            border: none;
            background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

        }

        &:nth-child(2) {
            width: 60px;
            height: 32px;
            opacity: 1;
            border-radius: 2px;
            background: rgba(242, 243, 245, 1);
            color: rgba(0, 0, 0, 0.3);
            padding: 8px 16px 8px 16px;

            &:hover {
                border: none;
                background: rgb(228, 228, 228);

            }
        }


    }

    .el-input-number {
        width: 165px;

        .el-input {
            width: 165px;

            .el-input__inner {
                width: 165px;
                border: 1px solid rgba(127, 127, 213, 0.5);
                border-radius: 0px;
            }
        }
    }

    .el-dialog__title {
        border-left: 3px solid rgba(84, 91, 245, 1);
        padding-left: 8px;

    }
}
</style>
<template>
    <div class="app-container">
        <p> 审核管理</p>
        <div class="header">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                label-width="85px">
                <el-form-item label="账号描述：" prop="accountDescription">
                    <el-input v-model="queryParams.accountDescription" placeholder="请输入账号描述" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="账号：" prop="account">
                    <el-input v-model="queryParams.account" placeholder="请输入手机号" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content">

            <el-tabs v-model="activeGame" @tab-click="handleGame">
            </el-tabs>

            <el-table v-loading="loading" :data="managementList" @selection-change="handleSelectionChange" stripe>
                <el-table-column label="编号" align="center" width="50">
                    <template slot-scope="scope">
                        {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" />
                <el-table-column label="销售渠道" align="center" prop="dictLabel" />
                <el-table-column label="销售编号" align="center" prop="saleId" />
                <el-table-column label="游戏品类" align="center" prop="dictName" />
                <el-table-column label="账号" align="center" prop="account" />
                <el-table-column label="提款金额" align="center" prop="saleAmount" />
                <el-table-column label="亏损金额" align="center" prop="difference" />
                <el-table-column label="成本金额" align="center" prop="recycleAmount" />
                <el-table-column label="销售客服" align="center" prop="salesCustomerName" />
                <el-table-column label="入库时间" align="center" prop="tsCreateTime" />
                <el-table-column label="在库时间" align="center" prop="daysInStock">
                    <template slot-scope="scope">
                        <span v-if="scope.row.daysInStock || scope.row.daysInStock === 0">
                            {{ scope.row.daysInStock }} 天
                        </span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-popconfirm confirm-button-text='是的' cancel-button-text='不用了' icon="el-icon-info"
                            icon-color="red" title="确定是否同意">
                            <el-button slot="reference" size="mini" type="text" @click="agreement(scope.row)" v-hasPermi="['system:agreement:add']" >
                                <span style="color: rgba(83, 90, 244, 1);">
                                    同意
                                </span>
                            </el-button>
                        </el-popconfirm>

                        <el-button size="mini" type="text" @click="handleNotation(scope.row)">
                            <span style="color: rgba(83, 90, 244, 1);">
                                拒绝
                            </span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>


        <el-dialog title="拒绝出库" :visible.sync="openNotation" width="400px" append-to-body :close-on-click-modal="false">
            <el-form ref="formNotation" :model="formNotation" :rules="rules" label-width="120px">
                <el-form-item label="销售金额：" prop="saleAmount">
                    <el-input v-model="formNotation.saleAmount" placeholder="请输入销售金额" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormNotation">确 定</el-button>
                <el-button @click="cancelNotation">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { listAgreement, refuse, addAgreement } from '@/api/business/examination'
export default {
    name: 'Management',
    data() {
        return {
            //销售渠道
            saleChannelList: [],
            //库存状态列表
            stockStatusList: [],
            //绑定手机列表
            phoneList: [],
            //换绑客服
            changeList: [],
            //回收客服
            recycleList: [],
            //销售客服
            sellList: [],
            //二次实名
            secondaryRealNameList: [],
            //回收列表
            recycleChannelList: [],
            //渠道列表
            bindingChannelList: [],
            //区服列表
            regionList: [
                { label: '3936区', value: '3936' }
            ],
            //游戏列表
            gameList: [],
            activeGame: '',
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            managementList: [],
            //当前绑定的手机号和渠道
            bindingChannelId: '',
            phoneData: {
                phoneCode: null,
                phoneId: null,
                phoneNumber: null
            },
            // 弹出层标题
            title: '',
            // 是否显示新增弹出层
            open: false,
            // 是否显示提号弹出层
            openNotation: false,
            // 是否显示转问题弹出层
            openProblem: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                phoneNumber: null,
                accountDescription: null,
                account: null,
                recycleChannelId: null,
                orderNumber: null,
            },
            form: {},
            formNotation: {},
            rules: {

            }
        }
    },
    created() {
        this.getList()
    },

    methods: {
        cancelNotation() {
            this.base()
            this.resetForm('form')

        },
        submitFormNotation() {
            this.$refs['formNotation'].validate(valid => {
                // 输入对应的金额修改
                refuse(this.formNotation).then(response => {
                    this.$modal.msgSuccess('操作成功')
                    this.base()
                })
            })
        },
        // 拒绝
        handleNotation(row) {
            this.openNotation = true
            this.formNotation = { ...row }
        },

        // 同意按钮
        agreement(row) {
            console.log(row);
            addAgreement(row).then(response => {
                this.$modal.msgSuccess('操作成功')
                this.base()
            })
        },
        //切换Tab
        handleGame(tab, event) {
            this.queryParams.dictCodeId = tab.name
            this.getList()
        },
        /** 查询列表 */
        getList() {
            this.loading = true
            listAgreement(this.queryParams).then(response => {
                console.log(response.rows)
                this.managementList = response.rows
                console.log(this.managementList);
                this.total = response.total
                this.loading = false
            })
        },

        //新增 取消按钮
        cancel() {
            this.openNotation = false
            this.reset()
        },
        //新增 表单重置
        reset() {
            this.form = {
                phoneId: null,
                phoneCode: null
            }
            this.resetForm('form')
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '新增账号'
        },
        /** 新增 转问题 确认提交 */
        submitForm(text) {
            if (this.form.id != null) {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (text == 'mark') {
                            update(this.form).then(response => {
                                this.$modal.msgSuccess('操作成功')
                                this.open = false
                                this.openProblem = false
                                this.getList()
                            })
                        } else {
                            updateManagement(this.form).then(response => {
                                this.$modal.msgSuccess('操作成功')
                                this.open = false
                                this.openProblem = false
                                this.getList()
                            })
                        }

                    }
                })
            } else {
                this.$refs['form'].validate(valid => {
                    this.form.radioSelections = this.radioSelections
                    this.form.inputDataArray = this.inputDataArray
                    this.form.checkList = this.checkList
                    this.form.dropDown = this.dropDown
                    if (valid) {
                        addManagement(this.form).then(response => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                })
            }

        },

        // 公开操作
        base() {
            this.openNotation = false
            this.getList()
        },


        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.$refs.queryForm.resetFields()
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
    }
}
</script>
